<template>
	<view style="background-color: white;z-index: 99999;">

		<scroll-view :scroll-y="true" :style="'max-height:'+windowHeight*0.9+'px'">
			<view class="dabox">
			
				<view class="hbng">
					<view class="iconk" @click="clepop"></view>
					<view class="xuanzh">选择档期</view>
				</view>
				<view class="xbox">
					<view class="xbtn" @click="leftArrow">
						<image class="ximg hnjm" :src="icon.leftJianIcon" mode=""></image>
					</view>
					<view class="txtc">
						{{year}}
						<view class="xm">年</view>
						{{month}}
						<view class="xm">月</view>
					</view>
					<view class="xbtn" @click="rightArrow">
						<image class="ximg" :src="icon.leftJianIcon" mode=""></image>
					</view>
				</view>
				<view class="time_box">
					<view class="tbox">
						<view class="riq">
							<view class="rbtn" v-for="(item,i) in weekList" :key='i'>{{item.txt}}</view>
						</view>
			
						<view class="qir">
							<!-- <view class="qbtn" >
							<view class="ri mkl">28</view>
							
						</view>
						<view class="qbtn" >
							<view class="ri mkl">29</view>
							
						</view>
						<view class="qbtn">
							<view class="ri mkl">30</view>
							
						</view> -->
							<!-- <view class="qbtn" :class="{xuank:xhb==i}" v-for="(item,i) in paiqiObj.date" :key='i' @click="chank(item,i)">
							<view class="ri" :class="{man:item.type==2}">{{item.num}}</view>
							<view class="tai" :class="{man:item.type==2,xiu:item.type==3}">{{item.type==1?'空':item.type==2?'满':'休'}}</view>
						</view> -->
							<view class="qbtn" :class="{xuank:xhb==i}" v-for="(item,i) in paiqiObj.date" :key='i'
								@click="chank(item,i)">
								<view class="ri" :class="{man:(item.type==2||item.type==3||item.type==4)}">{{item.num}}
								</view>
								<view class="tai" :class="{man:item.type==2,xiu:item.type==3}">
									{{item.type==1?'空':item.type==2?'满':item.type==3?'休':''}}</view>
							</view>
							<!-- <view class="qbtn">
							<view class="ri mkl">1</view>
							
						</view> -->
						</view>
			
			
					</view>
				</view>
			
			
				<view class="yuye" :class="{mei:false}" @click="yueenter">确定</view>
				<view class="" style="height:50rpx">
			
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			paiqiObj: {
				type: Object,
				default: {}
			},
			year: {
				default: 0
			},
			month: {
				default: 0
			}
		},
		data() {
			return {
				weekList: [{
						txt: '日'
					},
					{
						txt: '一'
					},
					{
						txt: '二'
					},
					{
						txt: '三'
					},
					{
						txt: '四'
					},
					{
						txt: '五'
					},
					{
						txt: '六'
					}
				],
				xhb: -1,
				riqi: '',
				windowHeight:0,
				years:'',
				mouths:'',
				days:''
			}
		},
		computed: {
			...mapState(['icon'])
		},
		created() {
			this.windowHeight = wx.getSystemInfoSync().windowHeight;
		},
		onLoad() {

		},
		mounted() {
			this.years = this.getNowDate(1);
			this.mouths = this.getNowDate(2);
			this.days = this.getNowDate(3);
		},
		methods: {
			getNowDate(type) {
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				if (type == 1) {
					return y;
				} else if (type == 2) {
					return m;
				}else {
					return d;
				}
			},
			// 月份减
			leftArrow() {
				if(this.month==this.mouths){
					return;
				}
				this.$emit('leftArrow');
			},
			//月份加
			rightArrow() {
				this.$emit('rightArrow');
			},
			chank(e, k) {
				if(this.month==this.mouths&&e.num<=this.days){
					uni.showToast({
						title: '不能选择当日之前包含当日的日期!',
						duration: 2000,
						icon: 'none',
						position: 'center'
					})
					return;
				}
				if (e.type == 2) {
					uni.showToast({
						title: '当天已约满 请选择其他时间～',
						duration: 2000,
						icon: 'none',
						position: 'center'
					})
				} else if (e.type == 1) {
					this.xhb = k;
					if (this.month < 10 && this.month.length != 2) {
						this.month = '0' + this.month
					}else{
						
					}
					if (e.num < 10) {
						this.day = '0' + e.num
					} else {
						this.day = e.num
					}
					this.riqi = this.year + '-' + this.month + '-' + this.day;
				} else if (e.type == 3) {
					uni.showToast({
						title: '当天休息 请选择其他时间～',
						duration: 2000,
						icon: 'none',
						position: 'center'
					})
				}
			},
			active(index) {
				this.typeIndex = index
			},
			closec() {
				this.$emit('close')
			},
			yueenter() {
				this.$emit('enterselect', this.riqi)
				this.clepop()
			},
			close() {

				this.$refs['popup'].close()
			},
			clepop() {
				this.$emit('clepop')
			}
		}
	}
</script>

<style scoped lang="scss">
	.dabox {
		background: #fff;
		border-radius: 32upx 32upx 0 0;
	}

	.headk {
		height: 88upx;
		position: relative;

		.namkl {
			position: absolute;
			left: 32upx;
			top: 20upx;
			font-size: 36upx;
			color: #fff;
		}

		.txty {
			color: #fff;
			text-align: center;
			font-size: 32upx;
			height: 88upx;
			line-height: 88upx;
		}
	}

	.hbng {
		width: 750upx;
		height: 100upx;
		background: linear-gradient(180deg, #FFF7EA 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 32upx 32upx 0 0;
		position: relative;

		.iconk {
			width: 36upx;
			height: 36upx;
			background: url(../../../static/tab_jian.png)no-repeat center;
			background-size: 100%;
			position: absolute;
			left: 36upx;
			top: 30upx;
		}

		.xuanzh {
			text-align: center;
			height: 100upx;
			color: #111;
			font-size: 30upx;
			line-height: 100upx;
		}
	}

	.xbox {
		width: 686upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 10upx;

		.xbtn {
			width: 62upx;
			height: 62upx;
			border-radius: 31upx;
			text-align: center;
			border: 2upx solid #6E6F71;

			.ximg {
				width: 30upx;
				height: 30upx;
				margin-top: 16upx;

				&.hnjm {
					transform: rotateZ(180deg);
				}
			}
		}

		.txtc {
			width: 300upx;
			text-align: center;
			color: #111;
			font-size: 44upx;
			font-weight: 550;
			height: 62upx;
			line-height: 62upx;

			.xm {
				display: inline-block;
				color: #999999;
				font-size: 24upx;

			}
		}
	}

	.time_box {
		width: 100%;
		margin: 0 auto;
		background: #F4F4F4;
		margin-top: 40upx;
		padding: 30upx 0;
		border-radius: 28upx;

		.tbox {
			width: 686upx;
			margin: 0 auto;

			.riq {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.rbtn {
					width: 72upx;
					text-align: center;
					color: #111;
					font-size: 32upx;
					height: 70upx;
					line-height: 70upx;
				}
			}

			.qir {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.qbtn {
					width: 95upx;
					text-align: center;
					margin-top: 40upx;
					display: flex;
					flex-flow: column;
					justify-content: space-between;
					height: 100upx;

					&.xuank {
						width: 72upx;
						height: 100upx;
						background: linear-gradient(180deg, #333333 0%, #111111 100%);
						box-shadow: 0px 8upx 20upx 0px rgba(0, 0, 0, 0.2);
						border-radius: 24upx;

						.ri {
							color: #fff;

							&.man {
								color: #fff;
							}
						}

						.tai {
							color: #fff;

							&.man {
								color: #fff;
							}
						}
					}

					.ri {
						color: #111;
						font-size: 32upx;
						font-weight: 550;
						margin-top: 10upx;

						&.man {
							color: #CCCCCC;
						}

						&.mkl {
							color: #CCCCCC;
						}
					}

					.tai {
						color: #111;
						font-size: 24upx;
						margin-bottom: 10upx;

						&.man {
							color: #FF3F4A;
						}

						&.xiu {
							color: #6E6F71;
						}
					}
				}
			}
		}
	}

	.yuye {
		width: 686upx;
		height: 80upx;
		background: #111;
		border-radius: 40upx;
		text-align: center;
		line-height: 80upx;
		color: #fff;
		font-size: 30upx;
		margin: 0 auto;
		margin-top: 60upx;

		&.mei {
			background: #999999;
		}
	}
</style>
<style>

</style>
